<div class="component">
    @if (formModel.schemaChanges | async; as schema) {
        <div>
            <sqx-form-hint> {{ schema.displayName }} </sqx-form-hint>
            @for (section of formModel.sectionsChanges | async; track section) {
                <div class="form-group">
                    <sqx-component-section
                        [form]="form"
                        [formContext]="formContext"
                        [formLevel]="formLevel + 1"
                        [formSection]="$any(section)"
                        [hasChatBot]="hasChatBot"
                        [isComparing]="isComparing"
                        [language]="language"
                        [languages]="languages" />
                </div>
            }
        </div>
    } @else {
        @if (schemasList.length > 1) {
            <button
                class="btn btn-outline-success dropdown-toggle"
                #buttonSelect
                (click)="schemasDropdown.show()"
                [disabled]="isDisabled | async"
                type="button">
                {{ "contents.addComponent" | sqxTranslate }}
            </button>
            <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonSelect" *sqxModal="schemasDropdown; closeAlways: true">
                @for (schema of schemasList; track schema) {
                    <a class="dropdown-item" (click)="setSchema(schema)"> {{ schema.displayName }} </a>
                }
            </sqx-dropdown-menu>
        }

        @if (schemasList.length === 1) {
            <button class="btn btn-outline-success" (click)="setSchema(schemasList[0])" [disabled]="isDisabled | async" type="button">
                {{ "contents.addComponent" | sqxTranslate }}
            </button>
        }

        @if (schemasList.length === 0) {
            <sqx-form-hint> {{ "contents.componentNoSchema" | sqxTranslate }} </sqx-form-hint>
        }
    }
</div>
